<template>
  <div>
    <!-- 展示相关 -->
    <div class="container">
      <div class="photoHeader">
        <div class="imgContainer">
          <img class="photoName" src="public/img/1.jpg" />
        </div>
        <div class="btnContainer">
          <span class="photoTitle">相册名称</span>
          <button class="mybtn" @click="handleUpload">上传照片</button>
        </div>
      </div>

      <div class="photoContainer">
        <template v-for="item in photos">
          <router-link
            :key="item.id"
            :to="{ name: 'Details', params: { item } }"
          >
            <div class="photoItem" :key="item.id">
              <img :src="item.imgUrl" />
              <span> {{ item.name }} </span>
            </div>
          </router-link>
        </template>
      </div>
    </div>
    <!-- 上传相关 -->
    <UploadPhoto
      :visible.sync="showUploadPhoto"
      @upload-completed="handleUploadCompleted"
    ></UploadPhoto>
  </div>
</template>

<script>
import { apiGetPhotos } from "../api";
import UploadPhoto from "../components/UploadPhoto.vue";
export default {
  components: {
    UploadPhoto,
  },
  data() {
    return {
      photos: [],
      showUploadPhoto: false,
    };
  },
  created() {
    this.updatePhotos();
  },
  methods: {
    async updatePhotos() {
      const { data } = await apiGetPhotos();
      this.photos = data.data.photos;
    },

    handleUpload() {
      this.showUploadPhoto = true;
    },
    handleUploadCompleted() {
      this.updatePhotos();
    },
  },
};
</script>

<style></style>
